<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="加入我们"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >
            <!-- 申请说明 -->
            <div class="info-input-tips">
                <img
                    class="warn-icon"
                    src="@/assets/images/joinUs/warn-icon.png"
                />
                请填写您的真实身份信息，提交后将不能修改
            </div>
            <!-- 申请说明 -->

            <!-- 申请信息填写 -->
            <div class="info-input-box">
                <div class="input-item">
                    <div class="input-item-name">您的姓名</div>
                    <input
                        class="input-item-box"
                        type="text"
                        placeholder="请输入您的真实姓名"
                        @blur="goBottom"
                    />
                </div>
                <div class="input-item">
                    <div class="input-item-name">联系电话</div>
                    <input
                        class="input-item-box"
                        type="tel"
                        placeholder="请输入联系电话"
                        @blur="goBottom"
                    />
                </div>
                <div class="input-item">
                    <div class="input-item-name">所在省份</div>
                    <select
                        class="select-box"
                        @change="getCityList"
                        v-model="provincVal"
                    >
                        <option
                            value="default"
                            disabled
                        >请选择所属省份</option>
                        <option
                            v-for="(item,index) of provinceList"
                            :key="index"
                            :value="item.id"
                        >{{item.name}}</option>
                    </select>
                    <img
                        class="select-icon"
                        src="@/assets/images/joinUs/select-icon.png"
                    />
                </div>
                <div class="input-item">
                    <div class="input-item-name">所在市区</div>
                    <select
                        class="select-box"
                        @change="getAreaList"
                        v-model="cityVal"
                    >
                        <option
                            value="default"
                            disabled
                        >请选择所在市区</option>
                        <option
                            v-for="(item,index) of cityList"
                            :key="index"
                            :value="item.id"
                        >{{item.name}}</option>
                    </select>
                    <img
                        class="select-icon"
                        src="@/assets/images/joinUs/select-icon.png"
                    />
                </div>
                <div class="input-item">
                    <div class="input-item-name">所在区县</div>
                    <select
                        class="select-box"
                        v-model="areaVal"
                    >
                        <option
                            value="default"
                            disabled
                        >请选择所在区县</option>
                        <option
                            v-for="(item,index) of areaList"
                            :key="index"
                            :value="item.id"
                        >{{item.name}}</option>
                    </select>
                    <img
                        class="select-icon"
                        src="@/assets/images/joinUs/select-icon.png"
                    />
                </div>
                <div class="input-item">
                    <div class="input-item-name">详细地址</div>
                    <input
                        class="input-item-box"
                        type="text"
                        placeholder="请输入详细地址"
                        @blur="goBottom"
                    />
                </div>
                <div class="input-item">
                    <div class="input-item-name">上传身份证</div>
                </div>
            </div>
            <!-- 申请信息填写 -->

            <!-- 证件照片上传 -->
            <div class="credentials-upload-box">
                <div class="upload-item">
                    <img
                        class="upload-result"
                        :src="uploadImg1"
                    />
                    <input
                        class="upload-btn"
                        id="fileUpload1"
                        type="file"
                        @change="upload1"
                    />
                    <div class="upload-info">请上传身份证正面</div>
                </div>
                <div class="upload-item">
                    <img
                        class="upload-result"
                        :src="uploadImg2"
                    />
                    <input
                        class="upload-btn"
                        id="fileUpload2"
                        type="file"
                        @change="upload2"
                    />
                    <div class="upload-info">请上传身份证反面</div>
                </div>
                <div class="upload-item">
                    <img
                        class="upload-result"
                        :src="uploadImg3"
                    />
                    <input
                        class="upload-btn"
                        id="fileUpload3"
                        type="file"
                        @change="upload3"
                    />
                    <div class="upload-info">请上传手持身份证照片</div>
                </div>
            </div>
            <!-- 证件照片上传 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <!-- 提交申请按钮 -->
        <div
            class="submit-btn"
            @click="goSubmit"
        >提交申请</div>
        <!-- 提交申请按钮 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'InfoInput',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '1.29rem',
                background: '#fff'
            },
            provincVal: 'default',
            cityVal: 'default',
            areaVal: 'default',
            provinceList: [],
            cityList: [],
            areaList: [],
            uploadImg1: require('@/assets/images/joinUs/credentials-up.png'),
            uploadImg2: require('@/assets/images/joinUs/credentials-down.png'),
            uploadImg3: require('@/assets/images/joinUs/credentials-hands.png')
        }
    },
    mounted() {
        this.getProvinceList()
    },
    methods: {
        getProvinceList() {
            let postData = this.qs.stringify({
                parent_id: 0
            })
            this.axios.post('/api/region/child.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.provinceList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getCityList() {
            this.cityVal = 'default'
            this.areaVal = 'default'
            let postData = this.qs.stringify({
                parent_id: this.provincVal
            })
            this.axios.post('/api/region/child.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.cityList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getAreaList() {
            this.areaVal = 'default'
            let postData = this.qs.stringify({
                parent_id: this.cityVal
            })
            this.axios.post('/api/region/child.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.areaList = data.data
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        upload1() {
            let that = this
            let file = document.getElementById('fileUpload1').files[0]
            let reader = new FileReader()
            if (file) {
                reader.onload = function(event) {
                    let imgUrl = event.target.result
                    that.uploadImg1 = imgUrl
                }
            }
            reader.readAsDataURL(file)
        },
        upload2() {
            let that = this
            let file = document.getElementById('fileUpload2').files[0]
            let reader = new FileReader()
            if (file) {
                reader.onload = function(event) {
                    let imgUrl = event.target.result
                    that.uploadImg2 = imgUrl
                }
            }
            reader.readAsDataURL(file)
        },
        upload3() {
            let that = this
            let file = document.getElementById('fileUpload3').files[0]
            let reader = new FileReader()
            if (file) {
                reader.onload = function(event) {
                    let imgUrl = event.target.result
                    that.uploadImg3 = imgUrl
                }
            }
            reader.readAsDataURL(file)
        },
        goSubmit() {
            const that = this
            this.commonDialog.alert(
                '申请已提交',
                '请保持电话畅通，客服人员将会在24小时内联系您',
                function() {
                    that.$router.push('/')
                }
            )
        },
        goBottom() {
            window.scroll(0, 0)
        }
    }
}
</script>

<style lang="stylus" scoped>
.info-input-tips
    display flex
    align-items center
    height 0.78rem
    padding 0 0.37rem
    background #ededed
    font-size 0.33rem
    color #666
    .warn-icon
        width 0.37rem
        height 0.37rem
        margin-right 0.18rem
.info-input-box
    padding 0 0.37rem
    background #fff
    .input-item
        display flex
        align-items center
        height 1.11rem
        border-bottom 1px solid #e5e5e5
        .input-item-name
            font-size 0.33rem
            color #666
        .input-item-box
            flex 1
            font-size 0.33rem
            color #333
            margin-left 0.46rem
            border none
            outline none
        .select-box
            flex 1
            margin-left 0.46rem
            border none
            outline none
            font-size 0.33rem
            color #333
            appearance none
        .select-icon
            width 0.37rem
            height 0.37rem
    .input-item:last-child
        border none
.credentials-upload-box
    display flex
    justify-content space-between
    flex-wrap wrap
    padding 0 0.37rem
    background #fff
    .upload-item
        position relative
        width 4.19rem
        height 3.58rem
        .upload-result
            position absolute
            top 0
            left 0
            width 4.19rem
            height 2.68rem
        .upload-btn
            position absolute
            top 0
            left 0
            width 4.19rem
            height 2.68rem
            opacity 0
        .upload-info
            position absolute
            left 0
            right 0
            bottom 0
            line-height 0.9rem
            text-align center
            font-size 0.38rem
            color #666
.submit-btn
    position absolute
    left 0
    right 0
    bottom 0
    height 1.29rem
    line-height 1.29rem
    text-align center
    background #d7463c
    font-size 0.38rem
    color #fff
input::-webkit-input-placeholder
    color #ccc
</style>
